<!-- src/components/Login.vue -->
<template>
  <div class="container">
    <div class="container-left">
      <img src="../assets/pics/login_welcome.png" alt="">
    </div>
    <div class="container-right">
      <el-form :model="form" :rules="rules" ref="formRef">
        <h1 class="slogin">SMS学生管理系统</h1>
        <el-form-item prop="email" class="form-input">
          <el-input v-model="form.email" placeholder="您的邮箱" />
        </el-form-item>
        <el-form-item prop="password" class="form-input">
          <el-input type="password" v-model="form.password" placeholder="您的密码" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="form-btn" @click="handleLogin">登录</el-button>
        </el-form-item>
      </el-form>
    </div>


  </div>



</template>

<script lang="js" setup>
import { ref, inject } from 'vue';
import { useUserStore } from '../store/user';
import { useRouter } from 'vue-router';
import axios from '../utils/http';
// 使用 inject 获取消息服务，并声明其类型
// import Cookies from 'js-cookie';

const message = inject('message');
// 使用 Store
const userStore = useUserStore();
const router = useRouter();
// 定义表单数据
const form = ref({
  email: '',
  password: '',
});

// 校验规则
const rules = {
  email: [{ required: true, message: '请输入邮箱', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
};

const showSuccess = (msg) => {
  message.success(msg);
};

const showError = (msg) => {
  message.error(msg);
};

// 登录处理函数
const handleLogin = async () => {
  if (!form.value.email) {
    showError('邮箱不能为空')
  } else if (!form.value.password) {
    showError('密码不能为空')
  } else {

    const response = await axios.post('/user/login', form.value);

    if (response.success) {
      const userInfo = response.result;
      userInfo.password = '';
      // console.log("userInfo", userInfo)
      showSuccess("登录成功！")
      userStore.setUser(userInfo);
      router.push({
        path: "/home"
      })
    } else {
      showError(response.message);
    }

  }

}

</script>

<style lang="scss" scoped>
/* Add your scss here */
.container {
  // padding: 0 16vw;
  background-color: #ffffff;
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;

  .container-left {
    height: 64%;
    width: 34vw;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 60px;


    img {
      height: 100%;
      width: 100%;
    }
  }

  .container-right {
    // flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;

    .slogin {
      letter-spacing: 2px;
      color: var(--el-color-primary);
      // color: rgb(161, 161, 161);
      margin-bottom: 30px;
    }

    .form-input {
      margin-bottom: 30px;
    }

    .form-input:deep(.el-form-item__content) {
      height: 50px;
      width: 300px;
      display: flex;
      align-items: center;
    }

    .form-input:deep(.el-input__inner) {
      height: 40px;
      display: flex;
      align-items: center;
    }

    .form-btn {
      margin-top: 10px;
      width: 100%;
      padding: 25px 134px;
      // background: linear-gradient(to right, rgb(94, 177, 255), rgb(93, 160, 248));
      border-radius: 8px;
      border: none;
      letter-spacing: 2px;
      // box-sizing: border-box;
    }
  }

}
</style>
